<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-11-05 21:07:13
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-11-06 21:24:24
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-11-05 21:07:13
 * @Description: 
-->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRequest } from 'alova'
import apis from '@/services/apis'
import { ElMessage } from 'element-plus'
import { useGlobalStore } from '@/stores/global'
import { judgeClient } from '@/utils/detectDevice'
import { Search, Plus } from '@element-plus/icons-vue'

const client = judgeClient()

const globalStore = useGlobalStore()
const requestMsg = ref()

const keyword = ref('');
const searchFriendData = ref();
const isShowAddFriednMsg = ref(false)
const targetId = ref()

const { send, loading } = useRequest(apis.sendAddFriendRequest, { immediate: false })
const show = computed(() => globalStore.addFriendSearchInfo.show)

const close = () => {
  globalStore.addFriendSearchInfo.show = false
  searchFriendData.value = []
  keyword.value = ''
  isShowAddFriednMsg.value = false
}

const closeMsg = () => {
  isShowAddFriednMsg.value = false
  requestMsg.value = ''
  // 刷新
  onSearch()
}

const onSearch = async() => {
  //调用接口
  const data = await apis
      .searchFriendRequest({
        keyword: keyword.value
      })
      .send()
      .catch(() => {
        console.log('搜索好友接口执行出错')
      })
  searchFriendData.value = data
};

const addFriend = (targetUid:number) => {
  isShowAddFriednMsg.value = true
  targetId.value = targetUid
}

const onSend = async () => {
  // 调用接口
  await send({ msg: requestMsg.value, targetUid: targetId.value})
  targetId.value = null
  ElMessage.success('TA一定会被你的诚意打动的~')
  closeMsg()
}

const isButtonDisabled = (friend: object) => {
  return friend.isFriend === 0 || friend.applyStatus === 1;
}
const getButtonText = (friend: object) => {
  if (friend.isFriend === 0) {
    return '已经是好友啦';
  } else if (friend.applyStatus === 1) {
    return '等待同意';
  } else {
    return '添加好友';
  }
}

</script>

<template>
  <ElDialog
    class="setting-box-modal"
    :model-value="show"
    :width="client === 'PC' ? 400 : '50%'"
    :close-on-click-modal="false"
    center
    :show-close="false"
    @close="close"
  >
    <div>
      <el-row>
        <el-col :span="21">
          <el-input v-model="keyword" placeholder="请输入好友昵称或手机号"></el-input>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button :icon="Search" type="primary" @click="onSearch" circle />
        </el-col>
      </el-row>
      <!--便利查询列表-->
      <el-scrollbar max-height="270px">
        <el-row v-for="friend in searchFriendData" :key="friend.targetId" style="margin-bottom: 10px;">
          <el-col :span="4">
            <img :src="friend.avatar" alt="avatar" style="width: 50px; height: 50px; border-radius: 50%;">
          </el-col>
          <el-col :span="14">
            <div class="friend-name">{{ friend.name }}</div>
          </el-col>
          <el-col :span="4">
            <div class="friend-button">
              <el-button type="primary" size="small" :icon="Plus" round @click="addFriend(friend.targetId)" 
              :disabled="isButtonDisabled(friend)">
              {{ getButtonText(friend) }}
            </el-button>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </ElDialog>
  <!------添加好友的请求消息--------->
  <ElDialog
    class="setting-box-modal"
    :model-value="isShowAddFriednMsg"
    :width="client === 'PC' ? 400 : '50%'"
    :close-on-click-modal="false"
    center
    :show-close="false"
    @close="isShowAddFriednMsg"
  >
    <ElInput
        :autosize="{ minRows: 4, maxRows: 4 }"
        :maxlength="50"
        type="textarea"
        resize="none"
        v-model="requestMsg"
        placeholder="发条有趣的问候语吧~"
      />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeMsg">取消</el-button>
        <el-button type="primary" @click="onSend" :loading="loading">发送</el-button>
      </span>
    </template>
</ElDialog>

</template>

<style lang="scss" src="./styles.scss" scoped />
<style lang="scss" scoped>
.friend-name {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: left; /* 如果你也需要水平居中 */
  height: 100%; /* 使 .friend-name 高度与父元素相同 */
}
.friend-button {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: right; /* 如果你也需要水平居中 */
  height: 100%; /* 使 .friend-name 高度与父元素相同 */
}
</style>
